<script lang="ts" setup>
	import carList from '@/components/car-list/car-list.vue'
	import { reactive, ref, watch } from "vue";
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		useRouter
	} from 'uni-mini-router'
	import {
		getCurrentInstance
	} from 'vue'
	import {
		userStore,

	} from '@/pinia';
	let router = useRouter()
	const userStoreInfo = userStore();
	const {
		proxy,
	} = getCurrentInstance()
	const jsLink = (e) => {
		router.push({
			name: 'submitOrder',
			params: {
				data: JSON.stringify(e)
			}
		})
	}

	// onReachBottom(() => {
	// 	pageNum.value++
	// 	getCart()
	// 	uni.hideLoading()
	// })
	let pageNum = ref(1)
	const getCart = () => {
		//获取购物车
		proxy.$req('GET', proxy.$api.getCartList, {
			memberId: userStoreInfo.userInfo.id
		}).then((res) => {
			console.log(res);
			// cartData.value = res.result
			cartData.value = res.result.concat(cartData.value)
			cartData.value.forEach((item) => {
				item = Object.assign(item, { selected: false });
				item.glist.forEach((it) => {
					it = Object.assign(it, { selected: false });
				})
			})
			console.log(cartData.value);
			console.log("这里是删除后")
			mycar.value.getAllMount()
		})
	}
	getCart()
	let cartData = ref([])
	watch(cartData, (newVal, oldVal) => {
		console.log(newVal, "打印cartData新值")
	})
	const selGoods = function (carList) {
		console.log('选择商品');
		// var that = this;
		// cartData.value = carList;
	}
	const selShop = function (carList) {
		console.log('选择店铺');
		// var that = this;
		// cartData.value = carList;
	}
	const allSelBtn = function (carList) {
		//点击全选
		cartData.value = carList;
	}
	const jsbtn = function (ids, list) {
		//结算按钮
		console.log(list);
		let a = JSON.parse(JSON.stringify(list))
		a.forEach((item, index) => {
			item.glist = item.glist.filter((it) => { return it.selected })
		})
		/* 
		 跳转结算页面	
		 数据都带过去
		*/
		let data = {
			type: 2,
			goodsList: a
		}
		jsLink(data)
	}
	const delbtn = function (ids, list) {
		//删除按钮
		console.log(ids);
		let dou = ids.indexOf(',')
		let data;
		let url;
		if (dou != -1) {
			data = {
				ids: ids
			}
			url = proxy.$api.deleteCartAll
		} else {
			data = {
				id: ids
			}
			url = proxy.$api.deleteCart
		}
		proxy.$req('DELETE', url, data).then((res) => {
			console.log(res);
			if (!res.success) {
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
				return
			}
			cartData.value = []
			pageNum.value = 0
			getCart()
		})


		// for (let i = 0; i < list.length; i++) {
		// 	for (let k = 0; k < list[i].glist.length; k++) {
		// 		if (list[i].glist[k].selected == true) {
		// 			list[i].glist.splice(k, 1);
		// 			k--
		// 		}
		// 	}
		// 	if (list[i].glist.length == 0) {//若当前店铺商品删除完，删除当前店铺
		// 		list.splice(i, 1);
		// 		i--
		// 	}
		// }
		// carData.carList = list;

		// carData.$refs.mycar.getAllMount(list);//计算价格展示
	}
	let mycar = ref(null)
	const changeNum = function (total, carList, shopIndex, gIndex, number, id, type) {
		//改变数量
		proxy.$req('POST', proxy.$api.editCart, {
			id: id,
			cartNum: number,
		}).then((res) => {
			if (!res.success) {
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
				return
			}
			//成功
			cartData.value[shopIndex].glist[gIndex].cartNum = number;
			// if (type == 0) {
			// 	cartData.value[shopIndex].total = total - 1;
			// } else {
			// 	cartData.value[shopIndex].total = total + 1;
			// }
			cartData.value = carList;
			mycar.value.getAllMount(carList);//计算价格展示
		})
	}
	// [
	// 	{
	// 		shopId: 1,
	// 		title: "天猫超市",
	// 		total: 2,
	// 		goodsAmount: 6051,
	// 		selected: true,
	// 		glist: [
	// 			{
	// 				id: 236,
	// 				gid: 47,
	// 				name: "毛巾（厚）",
	// 				img: "https://img2.baidu.com/it/u=1096050882,3055914985&fm=253&app=138&size=w931&n=0&f=PNG&fmt=auto?sec=1689267600&t=2d311c030c544dd2ab3d9a738c07d7ce",
	// 				gsId: 72,
	// 				spec_key_name: "尺寸:M 颜色:黑色",
	// 				spec: [{ name: "尺寸", value: "M" }, { name: "颜色", value: "黑色" }],
	// 				price: 19,
	// 				number: 1,
	// 				stock: 193,
	// 				selected: true,
	// 			},
	// 			{
	// 				id: 237,
	// 				gid: 45,
	// 				name: "盆栽",
	// 				img: "https://img2.baidu.com/it/u=1096050882,3055914985&fm=253&app=138&size=w931&n=0&f=PNG&fmt=auto?sec=1689267600&t=2d311c030c544dd2ab3d9a738c07d7ce",
	// 				gsId: 65,
	// 				spec_key_name: "件装:1件居家必备:枕头",
	// 				spec: [{ name: "件装", value: "1件" }, { name: "居家必备", value: "枕头" }],
	// 				price: 6001,
	// 				number: 1,
	// 				stock: 77,
	// 				selected: true,
	// 			}
	// 		]
	// 	},
	// 	{
	// 		shopId: 2,
	// 		title: "京东超市",
	// 		total: 11,
	// 		selected: true,
	// 		goodsAmount: 6051,
	// 		glist: [
	// 			{
	// 				id: 188,
	// 				gid: 31,
	// 				name: "橘子",
	// 				img: "https://img2.baidu.com/it/u=1096050882,3055914985&fm=253&app=138&size=w931&n=0&f=PNG&fmt=auto?sec=1689267600&t=2d311c030c544dd2ab3d9a738c07d7ce",
	// 				gsId: 50,
	// 				spec_key_name: "件装:2件",
	// 				spec: [{ name: "件装", value: "2件" }],
	// 				price: 3,
	// 				number: 10,
	// 				stock: 78,
	// 				selected: true,
	// 			},
	// 			{
	// 				id: 235,
	// 				gid: 35,
	// 				name: "积分购买测试",
	// 				img: "https://img2.baidu.com/it/u=1096050882,3055914985&fm=253&app=138&size=w931&n=0&f=PNG&fmt=auto?sec=1689267600&t=2d311c030c544dd2ab3d9a738c07d7ce",
	// 				gsId: 56,
	// 				spec_key_name: "尺寸:M 颜色:黑色",
	// 				spec: [{ name: "尺寸", value: "M" }, { name: "颜色", value: "黑色" }],
	// 				price: 1,
	// 				number: 1,
	// 				stock: 97,
	// 				selected: true,
	// 			}
	// 		]
	// 	}
	// ]
	let bianjiStatus = ref(false)
	const bianji = () => {
		uni.showLoading({})
		setTimeout(() => {
			bianjiStatus.value = !bianjiStatus.value
			console.log(bianjiStatus.value);
			uni.hideLoading()
		}, 600)
	}
</script>
<template>
	<u-navbar :placeholder="true" title="购物车" :autoBack="true">
		<template #right>
			<view class="" @click="bianji">
				{{ bianjiStatus?'完成':'编辑' }}
			</view>
		</template>
	</u-navbar>
	<view class="xxx">
		<car-list ref="mycar" :delShow="bianjiStatus" :carList="cartData" @allSelBtn="allSelBtn" @selShop="selShop"
			@selGoods="selGoods" @jsbtn="jsbtn" @delbtn="delbtn" @changeNum="changeNum"></car-list>
	</view>
</template>
<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.xxx {
		width: 750rpx;
		margin: 0 auto;
	}
</style>